/**
* @description: 二级现场统计 跳转 现场统计列表
* @author: JiWei
* @remark:
**/
<template>
  <view class="field-container">
    <nav-bar class="header" back title="现场统计" @goBack="goBack"/>
    <plateTitle title="现场统计" :isRequired="false" class="plate-title" />
    <view class="plan-show">
      <uni-table ref="table" stripe>
        <uni-tr  :style="{ backgroundColor: '#F5F6F8' }">
          <uni-th v-for="(item,index) in columns" :key="index" align="center" :width="item.width">{{ item.label }}</uni-th>
        </uni-tr>
        <uni-tr v-for="(item,index) in tableData" :key="index" :style="{ backgroundColor: '#F5F6F8' }">
          <uni-td align="center">{{index+1}}</uni-td>
          <uni-td align="center">{{item.engName}}</uni-td>
          <uni-td align="center">{{item.attr}}</uni-td>
          <uni-td align="center">{{item.sceneNumber}}</uni-td>
        </uni-tr>
      </uni-table>
    </view>
  </view>
</template>
<script>
import plateTitle from '../common/plateTitle.vue'
import navBar from "../../../components/common/nav-bar.vue";
import {mapGetters} from "vuex";

export default {
  name: 'fieldStatistics',
  components: { plateTitle,navBar},
  props: {},
  data() {
    return {
      month:'',
      tableData:[],
      columns:[
        {
          label:'序号',
          width:'80',
        },
        {
          label:'工程名称',
          width:'80',
        },
        {
          label:'工程简称',
          width:'80',
        },
        {
          label:'现场总数',
          width:'80',
        },
      ],
    };
  },
  computed: {
    ...mapGetters(['userData']),

  },
  watch: {},
  onLoad(option) {
    this.month = option.name
    this.getSceneInfo()
  },
  methods: {
    goBack() {
      uni.navigateTo({
        url: '/pages/communicationControl/index/index'
      })
    },
    getSceneInfo() {
      let params = {
        userId: this.userData.USERID,
        roleId: this.userData.ROLEID,
        month: this.month //月份
      }
      this.$apiRequest.gcgkApi.sceneInfo(params).then(res => {
        this.tableData = res.data
      })
    }
  }
};
</script>
<style scoped lang="scss">
.field-container {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  .plate-title {
    margin: px2vh(30) px2vw(30);
  }
  .plan-show {
    background: #fff;
    border-radius: px2vw(20);
    padding: px2vh(50) px2vw(40);
  }
}
.uni-table-th {
  font-size: 12px;
}
.uni-table-td {
  font-size: 10px;
  line-height: 16px;
  padding: 8px 0;
}
</style>
